<template>
  <div v-loading="dataLoading">
    <c-list :column="3">
      <c-list-item label="门店项目建设号" :value="shopConstructDTO&&shopConstructDTO.constCode" />
      <c-list-item label="门店测绘批次" :value="detailDataDTO.surveyBatchCode" />
      <c-list-item label="门店测绘进度" dict-type-code="SHOP_SURVEY_STATE" :value="detailDataDTO.state" />
      <c-list-item label="门店编码" :value="shopConstructDTO.shopCode" />
      <c-list-item label="门店" :value="shopConstructDTO.shopName" />
      <c-list-item label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="shopConstructDTO.businessStatus" />
      <c-list-item label="客户编码" :value="shopConstructDTO.clientCode" />
      <c-list-item label="所属客户" :value="shopConstructDTO.clientName" />
      <c-list-item label="所属办事处" :value="shopConstructDTO.officeName" />
      <c-list-item label="办事处性质" :value="shopConstructDTO.officeNature" />
      <c-list-item label="经销商姓名" :value="shopConstructDTO.customerName" />
      <c-list-item label="经销商电话" :value="shopConstructDTO.customerPhone" />
      <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="shopConstructDTO.shopType" />
      <c-list-item label="门店业务类型" dict-type-code="BIZ_TYPE" :value="shopConstructDTO.shopBizType" />
      <c-list-item label="门店详细地址" :span="2" :value="shopConstructDTO.shopAddress" />
    </c-list>
    <c-list :column="3">
      <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="shopConstructDTO.shopCityLevel" />
      <c-list-item label="报图类型" dict-type-code="MARKET_TYPE" :value="detailDataDTO.marketType" />
      <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="detailDataDTO.constType" />
      <c-list-item label="商家类别" dict-type-code="BIZMAN_TYPE" :value="detailDataDTO.bizmanType" />
      <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detailDataDTO.decorationForm" />
      <!-- 2023/2/9新增是否战略市场 -->
      <c-list-item label="是否战略市场" dict-type-code="BOOLEANS" :value="detailDataDTO.isStrategyMarket&&String(detailDataDTO.isStrategyMarket)" />
      <c-list-item label="门店建设范围" dict-type-code="DECORATION_RANGE" :value="detailDataDTO.decorationRange" />

      <c-list-item label="预计测绘申请时间" :value="detailDataDTO.expectApplySurveyTime" />
      <c-list-item label="门店档案面积" :value="shopConstructDTO.shopArea" />
      <c-list-item label="测绘申请卖场总面积" :value="detailDataDTO.applyShopTotalArea" />
      <c-list-item label="翻新面积" :value="detailDataDTO.refurbishArea" />
      <c-list-item label="扩建面积" :value="detailDataDTO.expansionArea" />
      <c-list-item label="测量申请门头面积" :value="detailDataDTO.applyDheadArea" />
      <c-list-item label="预计报图区域" :value="formaterData(areaList,detailDataDTO.reportPicZone)" />
      <c-list-item label="卖场是否已拆除" dict-type-code="BOOLEANS" :value="detailDataDTO.isShopRemove&&String(detailDataDTO.isShopRemove)" />
      <c-list-item label="测绘申请是否超时" dict-type-code="BOOLEANS" :value="detailDataDTO.isOuttimeUnsurvel&&String(detailDataDTO.isOuttimeUnsurvel)" />
      <c-list-item label="测绘申请人" :value="detailDataDTO.applicantName||detailDataDTO.applicantCode" />
      <c-list-item label="测绘申请时间" :value="detailDataDTO.applyTime" />
      <c-list-item label="测绘申请审核通过时间" :value="detailDataDTO.applyPassTime" />
      <c-list-item type="textarea" :span="3" label="卖场未拆除原因" :value="detailDataDTO.unremoveReason" />
      <c-list-item type="textarea" :span="3" label="测绘申请说明" :value="detailDataDTO.applyDesc" />
    </c-list>

  </div>
</template>
<script>
import { getDetailData } from '@/api/shopMap'
import { getAreaList } from '@/api/common'

export default {
  name: 'MapDetail',
  components: { },
  props: {
    detailData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataLoading: false,
      shopConstructDTO: {},
      areaList: [],
      detailDataDTO: {}
    }
  },
  watch: {
    detailData: {
      handler(v) {
        this.dataLoading = true
        getDetailData(v).then(res => {
          if (res.success === 1) {
            this.detailDataDTO = res.data
            this.shopConstructDTO = res.data.shopConstructDTO
            this.dataLoading = false
          }
        })
      }

    }
  },
  created() {
    this.dataLoading = true
    this.getAreaSelect()
    getDetailData(this.detailData).then(res => {
      if (res.success === 1) {
        this.detailDataDTO = res.data
        this.shopConstructDTO = res.data.shopConstructDTO
        this.dataLoading = false
      }
    })
  },
  methods: {
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.areaList = res.data.records
      })
    },
    // 数据字典格式化数据
    formaterData(arr, value) {
      if (!value || !arr) {
        return value || ''
      }
      let list = []
      if (typeof (value) === 'string') {
        list = value.split(',')
      } else {
        list = value
      }
      const temp = []
      arr.forEach((item) => {
        const flag = list.some(v => v === item.areaCode)
        if (flag) {
          temp.push(item.areaName)
        }
      })
      return temp.toString() || value
    }
  }
}
</script>
